"use client";
import Link from 'next/link';
import React, { PropsWithChildren, useState } from 'react';

import { UserOutlined } from '@ant-design/icons';
import { ProLayout, SettingDrawer } from '@ant-design/pro-components';

import type { ProLayoutProps, ProSettings } from '@ant-design/pro-components';
import { css } from '@emotion/css';
export const SdiLayout: React.FC<PropsWithChildren<{
	config: ProLayoutProps
}>> = (props) => {
	const [settings, setSetting] = useState<Partial<ProSettings> | undefined>({
		fixSiderbar: true,
	});
	const [childControl, setChildControl] = useState<React.ReactNode>(props.children);
	const [pathname, setPathname] = useState('/');
	return (
		<div 
			id="test-pro-layout"
			className={css`display: flex; flex: auto;`}
		>
			<ProLayout
				{...props.config}
				className={css`display: flex; flex: auto;`}
				contentStyle={{
					padding: '2px',
				}}
				title="Deep Learning"
				location={{
					pathname,
				}}
				waterMarkProps={{
					content: 'Pro Layout',
				}}
				menuFooterRender={(props) => {
					return (
						<a
							style={{
								lineHeight: '48rpx',
								display: 'flex',
								height: 48,
								color: 'rgba(255, 255, 255, 0.65)',
								alignItems: 'center',
							}}
							href="https://preview.pro.ant.design/dashboard/analysis"
							target="_blank"
							rel="noreferrer"
						>
							{!props?.collapsed && 'Preview Pro'}
						</a>
					);
				}}
				onMenuHeaderClick={(e) => console.log(e)}
				menuItemRender={(item, dom) => (
					<Link href={item.path as string}>{dom}</Link>
				)}
				avatarProps={{
					icon: <UserOutlined />,
				}}
				{...settings}
			>
					{childControl}
			</ProLayout>
			<SettingDrawer
				pathname={pathname}
				getContainer={() => document.getElementById('test-pro-layout')}
				settings={settings}
				onSettingChange={(changeSetting) => {
					setSetting(changeSetting);
				}}
				disableUrlParams
			/>
		</div>
	);
};

export default SdiLayout;